<!--
  - Copyright(c)  2022 厦门外里科技有限公司 All rights reserved.
  -
  - https://www.wailikeji.com
  -
  - 版权所有，侵权必究！
  -->

<template>
	<view>
		<view class="title" style="font-size:34rpx ;margin: 40rpx; text-align: center">积分充值</view>
		<view style=" height: 400rpx; border-radius: 30rpx; margin: 50rpx 50rpx; background-color: #ffffff; ">
			<view style="margin: 0upx 20upx 50upx 20upx;">
				<u-icon name="info" color="#fc0107"></u-icon>
				开通会员查看二维码无需积分
			</view>
			<u-row justify="center" gutter="30" style="margin: 20upx 0upx 40upx 0upx ;">
				<u-col v-for="(value,index) in rechargeArr" :key="index" :span="12/rechargeArr.length"
					text-align="center">
					<view class="u-badge-wrap" :class="{'u-badge-wrap-active': rechargeSelect==index}"
						@tap="tapInfo(index)">
						<u-badge :is-center="false" type="error" :count="'送'+value.send+'积分'" :is-dot="false"
							:offset="[-15, 20]" size="default"></u-badge>
						<view class="recharge-gold">{{value.number}}</view>
						<view class="recharge-money">售价 {{value.price}} 元</view>
					</view>
				</u-col>
			</u-row>
			<u-button shape="circle" type="success" style="background-color: #50c34d;" @click="submit()">确认支付</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//积分充值套餐列表
				rechargeArr: [],
				rechargeSelect: 0, //积分充值默认选中
			}
		},

		created() {
			this.init()
		},
		methods: {
			submit() {
				let query = {};
				query.scene='1';
				query.goodId=this.rechargeArr[this.rechargeSelect].id;
				this.$Router.push({
					path: "/pages/my/recharge",
					query: query
				})
			},
			/**
			 * 初始化
			 */
			init() {
				this.$api.api('config.goldList')
					.then(res => {
						if (res.code == 200) {
							this.rechargeArr = res.rows
							this.rechargeSelect = this.rechargeArr.length - 1
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: res.msg
							});
						}
					})
			},
			/**
			 * 充值选中
			 */
			tapInfo(e) {
				this.rechargeSelect = e
			},
		}
	}
</script>

<style lang="scss">
	.u-badge-wrap {
		height: 140upx;
		width: 100%;
		border-radius: 20upx;
		background-color: #edebef;
		position: relative;
		padding-top: 20upx;

		.recharge-gold {
			display: flex;
			justify-content: center;
			font-size: 40upx;
		}

		.recharge-money {
			display: flex;
			justify-content: center;
			font-size: 18upx;
			color: #b3b3b3;
		}
	}

	.u-badge-wrap-active {
		color: white;
		background-color: #50c34d;

		.recharge-money {
			color: #e5e5e5;
		}
	}
</style>
